<template>
	<view class="container">
		<view v-for="(item,index) in order.items" :key="index">
			<view class="mb-40 font-size-medium">
				<image :src="item.itemImg" class="pro-img"></image>
				{{item.itemName}}
			</view>
			<view class="remarks">
				<view class="remark" :class="{'active': remark.active}" v-for="(remark, index) in remarks" :key="index" @tap="choose(index)">
					{{ remark.label }}
				</view>
			</view>
			<view class="textarea-box">
				<textarea class="textarea" v-model="commentsForm[index].content" placeholder-class="placeholder" :maxlength="50" @input="handleTextareaInput"></textarea>
				<view class="tips">{{ remark.length }} / 50</view>
			</view>
		</view>
		
		<button type="info" class="w-100 font-size-extra-lg border-radius-lg" style="margin-top: 50rpx;" @tap="submit">提交</button>
	</view>
</template>

<script>
		import {mapState, mapMutations} from 'vuex'
	export default {
		data() {
			return {
				remarks: [
					{label: '加急', active: 0},
					{label: '留微信联系', active: 0},
				],
				remark: '',
				order:{},
				commentsForm:[],
			}
		},
		computed:{
			...mapState(['ordersCache'])
		},
		onLoad({id}) {
			this.order=this.ordersCache.find(data=>data.orderId==id);
			let uid=uni.getStorageSync('userinfo').uid;
			this.commentsForm=this.order.items.map(data=>{
				return {
					userId:uid,
					itemId:data.itemId,
					itemName:data.itemName,
					itemSpecId:data.itemSpecId,
					sepcName:data.itemSpecName,
					content:'',
					commentLevel:1
				}
			});
		},
		methods: {
			...mapMutations(['SET_ORDER']),
			choose(index) {
				this.remarks.forEach(item => item.active = 0)
				this.remarks[index].active = 1
				this.remark = this.remarks[index].label
			},
			handleTextareaInput(e) {
				if(e.detail.value.length >= 50) {
					uni.showToast({icon: 'none', title: '最多备注50个字符'})
					return
				}
			},
			submit() {
				let that=this;
				that.$u.api.comment.add(that.commentsForm,this.order.orderId).then(res=>{
					uni.showToast({
						icon:'success',
						duration:2000,
						title:'评论成功',
						mask:true
					});
					that.$u.api.orders.get().then(result=>{
						that.SET_ORDER(result);
						uni.navigateBack({
							
						});
					})
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #FFFFFF;
		padding: 40rpx;
	}
	
	.remarks {
		margin-bottom: 40rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		font-size: $font-size-base;
		
		.remark {
			color: $text-color-assist;
			padding: 10rpx 26rpx;
			border: 1rpx solid rgba($color: $border-color, $alpha: 0.6);
			margin-right: 20rpx;
			
			&.active {
				color: #343434;
				border-color: #343434;
			}
		}
	}
	
	.textarea-box {
		.textarea {
			width: 100%;
			border: 1rpx solid rgba($color: $border-color, $alpha: 0.6);
			padding: 20rpx;
			font-size: $font-size-medium;
		}
	}
	.pro-img {
		width: 120rpx;
		height: 90rpx;
		flex-shrink: 0;
	}
</style>
